<template>
   <view>
      <u-navbar title="消息" leftIcon="" fixed placeholder>
        <i slot="right" class="icon-contact" @click="goTxl"></i>
      </u-navbar>
      <view class="content">
         <u-gap height="10" bgColor="#f5f5f5"></u-gap>
         <view v-if="items.length != 0">
            <u-swipe-action >
               <u-swipe-action-item v-for="(item, index) in items" :key="item.id" :index="index" :name="index"
               :options="[{text: '删除', style: {backgroundColor: '#f56c6c'}}]">
                  <u-cell @click="goChat(item)" isLink :border="false">
                     <template slot="icon">
                        <u-avatar :src="item.avatar" style="margin-right: 10px;"></u-avatar>
                     </template>
                     <template slot="title">
                        <text style="font-weight: bold;letter-spacing: 2px;font-size: 14px;">{{ item.name }}</text>
                     </template>
                     <template slot="label">
                        <text class="message">{{ item.label }}</text>
                     </template>
                     <template slot="value">
                        <u-badge :max="99" :value="item.badge" ></u-badge>
                     </template>
                  </u-cell>
               </u-swipe-action-item>
            </u-swipe-action>
         </view>
         <u-empty v-else text="暂无消息" icon="/static/no_message.png" :margin-top="40"></u-empty>
      </view>
   </view>
</template>

<script>
import { mapGetters } from 'vuex'
import mixin from '@/mixin'
export default {
   data() {
      return {
         
      }
   },
   mixins: [mixin],
   computed: {
      ...mapGetters(['message']),
      items() {
         return this.message
      }
   },
   created() {
      this.$appStore.getStorage('chatList') && JSON.parse(this.$appStore.getStorage('chatList'))
   },
   methods: {
      goTxl() {
         uni.navigateTo({
            url: "/pages/tab3/contact/index"
         })
      },
      goChat(item) {
         if(item.uid == 'sys') {
            this.$store.commit('CLEAR_BADGE', item.uid)
            uni.navigateTo({
               url: `/pages/tab3/list/index`
            })
            return
         }
         uni.navigateTo({
            url: `/pages/tab3/chat/index?uid=${item.uid}&name=${item.name}&avatar=${item.avatar}`
         })
      }
   }
}
</script>

<style scoped lang="scss">
.message {
   display: -webkit-box;
   padding-top: 2px;
   color: #999999;
   font-size: 12px;
   white-space: normal;
   text-overflow: ellipsis;
}

.swipe-action {
   display: flex;
   width: 100%;
   flex-wrap: nowrap;

   .u-cell {
      flex: 1;
   }

   &_delete {
      display: flex;
      align-items: center;
      padding: 5px 10px;
      background-color: #f56c6c;
      color: #ffffff;
   }
}
</style>
